<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击显示</button>

    <script>

        // 实现惰性单例简化

        // var loginLayout = (function () {
        //     var div = document.createElement("div")
        //     div.innerHTML = "登录弹窗"
        //     div.style.display = "none"
        //     document.body.appendChild(div)
        //     return div
        // })()

        // document.getElementById("btn").onclick = function () {
        //     loginLayout.style.display = "block"
        // }

        // 对代码进行改进

        var createDiolag = (function () {
            var div;

            return function() {
                if(!div) {
                    div = document.createElement("div")
                    div.innerHTML = "登录弹窗"
                    div.style.display = "none"
                    document.body.appendChild(div)
                    return div
                }
                return div
            }
        })()

        document.getElementById("btn").onclick = function () {
            var div = createDiolag()
            div.style.display = "block"
        }
    </script>
</body>
</html>